import React, { Component } from 'react';
import '../App.less';
import '../css/My.less'
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import Footer from  './Footer'
import axios from  'axios'
import Personal from  './Personal'
@observer class My extends Component {
    constructor(props) {
        super(props)
        this.state={
            personal:'',
            type:1
        }
    }
    componentWillMount(){
        Mobx.history= this.props.history
    }
    componentDidMount(){
        axios.get('http://www.niuduxiu.com/pc/personPage/personInfo.jhtml?id='+Mobx.zhanghao)
            .then((item)=>{
                    this.setState({
                        personal:item.data.date
                    })
            })
    }
    Personal(){
        axios.get('http://www.niuduxiu.com/pc/personPage/personInfo.jhtml?id='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    personal:item.data.date
                })
            })
    }
    toIndex(){
        this.props.history.push('/Index/'+Mobx.zhanghao)
    }
    ChangeMessage(){
        this.setState({
            type:2
        })
    }
    return(){
        this.setState({
            type:1
        })
    }
    toComponent(item){
        this.props.history.push('/'+item)
    }
    toIndex(){
        this.props.history.push('/Index/'+Mobx.zhanghao)
    }
    render() {
        return (
            <div className="App">
                <Footer />
                <div className='My'>
                    <div className='MyHeader'>
                        <div>
                            <div className='left'>
                                <img src={this.state.personal.head_pic} onClick={this.toIndex.bind(this)}  />
                            </div>
                            <div className='right'>
                                <p className='title shengluehao'>{this.state.personal.username}</p>
                                <p className='cityandzhiye shengluehao'>{this.state.personal.address} | {this.state.personal.occupation}</p>
                                <p className='my' onClick={this.ChangeMessage.bind(this)}>个人资料 ></p>
                            </div>
                        </div>
                        <img  className='shezhi'  src="" alt=""/>
                        <img className='MyHeaderMiddle' src="" alt=""/>
                    </div>
                    <div className='MyMiddle'>
                        <div>
                            <div onClick={this.toComponent.bind(this,'Focus')}>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>关注</p>
                            </div>
                        </div>
                        <div>
                            <div onClick={this.toComponent.bind(this,'Fans')}>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>粉丝</p>
                            </div>
                        </div>
                        <div>
                            <div onClick={this.toComponent.bind(this,'Niubi')}>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>牛币</p>
                            </div>
                        </div>
                    </div>
                    <p className='kongbai'></p>
                    <div className='MyMiddle2'>
                        <div>
                            我的消息
                            <img src={require('../img/xin.png')} alt=""/>
                        </div>
                        <div onClick={this.toComponent.bind(this,'CreateCollection')}>
                            我的收藏
                            <img src={require('../img/xin.png')} alt=""/>
                        </div>
                        <div  onClick={this.toComponent.bind(this,'OrganizationCertification')}>
                            组织认证
                            <img src={require('../img/xin.png')} alt=""/>
                        </div>
                    </div>
                    <p className='kongbai'></p>
                    <p className='titleName'>专属领地</p>
                    <div className='MyMiddle3'>
                        <div>
                            <div onClick={this.toIndex.bind(this)}>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>主页</p>
                            </div>
                        </div>
                        <div>
                            <div onClick={this.toIndex.bind(this)}>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>创意管理</p>
                            </div>
                        </div>
                        <div>
                            <div onClick={this.toIndex.bind(this)}>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>浏览者</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>足迹</p>
                            </div>
                        </div>
                    </div>
                    <p className='kongbai'></p>
                    <p className='titleName'>我的订单</p>
                    <div className='MyMiddle3'>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>所有订单</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>代付款</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>待收货</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>待评价</p>
                            </div>
                        </div>
                    </div>
                    <p className='kongbai'></p>
                    <p className='titleName'>我的服务</p>
                    <div className='MyMiddle3'>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>邀请注册</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img src={require('../img/xin.png')} alt=""/>
                                <p>牛币兑换</p>
                            </div>
                        </div>
                    </div>
                    <p className="noMore">已经是最低处了哦</p>
                    <div style={{display:this.state.type===2?'block':'none'}} >
                        <Personal personal={this.state.personal} Personal={this.Personal.bind(this)} return={this.return.bind(this)} />
                    </div>
                </div>

            </div>
        );
    }
}

export default My;
